<template>
    <div>
        <div class="mt-10">
            <div class="title mt6">{{ $t('企业微信告警配置') }}</div>
            <div style="width: 950px;" class="mt-22 ml-22">
                <a-form :form="formWeChat" labelAlign="left">
                    <a-row>
                        <a-col :span="20">
                            <a-form-item :label="$t('开启企业微信告警')" v-bind='formlayout' :required="true">
                                <a-switch v-model="checkedWechat" @change="onChange('wechat', checkedWechat)" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="20">

                            <a-form-item :label="$t('新增企业微信Webhook地址')" v-bind='formlayout'>
                                <!-- <a-input-group compact v-decorator="['url',{
                                                rules:[{required:true,message:'请输入网页地址'}]
                                            }]" >
                                            <a-select default-value="Option1">
                                                <a-select-option value="Option1">
                                                http://
                                                </a-select-option>
                                                <a-select-option value="Option2">
                                                https://
                                                </a-select-option>
                                            </a-select> -->
                                <a-input style="width: 100%" v-decorator="['url', {
                                    rules: [{ required: true, message: $t('Enter') + $t('Web_address') },
                                    { pattern: /^https:\/\/[^\s]*$/, message: $t('请按正确格式输入地址：如') + 'https://www' }], initialValue: weChatData.length > 0 && weChatData[0].addr ? weChatData[0].addr : ''
                                }]" :placeholder="$t('Enter') + $t('Web_address')" allow-clear />
                                <!-- pattern: /[a-zA-z]+:\/\/[^\s]*/, -->
                                <!-- </a-input-group> -->
                            </a-form-item>
                        </a-col>
                        <a-col :span="4" v-userAuth="'F4-2'">
                            <!-- <a-form-item>
                                <a-button style="margin-left: 16px;" type="primary" @click="addWeChat">{{
                                    $t('Add') }}</a-button>
                            </a-form-item> -->
                        </a-col>
                    </a-row>
                    <!-- <a-row style="border:1px solid #e8e8e8;height: 15.74em;overflow-y: auto;padding:1em">
                        <a-col v-for="item in weChatData" :key="item.id">
                            <p class="label"
                                style="padding:0 0.3em;display: flex;justify-content:space-between;align-items:center;">
                                <span class="addr" :title="item.addr">{{ item.addr }}</span>
                                <a-popconfirm :title="$t('Sure_confirm')" @confirm="delWeChat(item)" @cancel="cancel"
                                    :okText="$t('Yes')" :cancelText="$t('No')">
                                    <a-icon type="close-circle" twoToneColor="#cf1b47" />
                                </a-popconfirm>
                            </p>
                        </a-col>
                    </a-row> -->
                    <div class="mt-20" v-userAuth="'F4-2'">
                        <a-button style="color: #006db8;border: solid 1px #006db8;" @click="wechatConfigEffect" :loading="wechatloading">{{
                            $t('Test-effect') }}</a-button>
                        <a-button type='primary' :disabled="saveWechat" class="ml-16" @click="addWeChat">{{ $t('Save')
                            }}</a-button>
                    </div>
                </a-form>
            </div>

            <a-divider />

            <div class="title mt-24">{{ $t('钉钉告警配置') }}</div>
            <div style="width: 950px;" class="mt-22 ml-22">
                <a-form :form="form" labelAlign="left">
                    <a-row>
                        <a-col :span="20"> <a-form-item :label="$t('开启钉钉告警')" v-bind='formlayout1' :required="true">
                                <a-switch v-model="checkedHook" @change="onChange('hook', checkedHook)" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="20">
                            <a-form-item :label="$t('Topic')" v-bind='formlayout1'>
                                <a-input v-decorator="['topic', {
                                    rules: [{ required: true, message: $t('Enter') + $t('Topic') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }], initialValue: robotdata.topic
                                }]" :placeholder="$t('Enter') + $t('Topic')">
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="20">
                            <a-form-item :label="$t('DingTalk') + $t(' Webhook ') + $t('Addr')" v-bind='formlayout1'>
                                <a-input v-decorator="['url', {
                                    rules: [{ required: true, message: $t('Enter') + $t('Addr') },
                                    {
                                        pattern: /^https:\/\/[^\s]*$/,
                                        message: $t('请按正确格式输入地址：如') + 'https://www'
                                    }],
                                    initialValue: robotdata.url
                                }]" :placeholder="$t('Enter') + $t('Addr')" allow-clear />
                                <!-- pattern:/^https:\/\/oapi.dingtalk.com\/robot\/.*$/ -->
                            </a-form-item>
                        </a-col>
                        <a-col :span="4" v-userAuth="'F4-2'">
                            <!-- <a-form-item>
                                <a-button style="margin-left: 16px;" type="primary" @click="addHook">{{
                                    $t('Add') }}</a-button>
                            </a-form-item> -->
                        </a-col>
                    </a-row>
                    <!-- <a-row style="border:1px solid #e8e8e8;height: 15.74em;overflow-y: auto;padding:1em">
                        <p>{{ robotdata.url }}</p>
                        <a-col v-for="item in robotdata" :key="item.id">
                            <p class="label"
                                style="padding:0 0.3em;display: flex;justify-content:space-between;align-items:center;">
                                <span class="addr" :title="item.addr">{{ item.url }}</span>
                                <a-popconfirm :title="$t('Sure_confirm')" @confirm="delHook(item)" @cancel="cancel"
                                    :okText="$t('Yes')" :cancelText="$t('No')">
                                    <a-icon type="close-circle" twoToneColor="#cf1b47" />
                                </a-popconfirm>
                            </p>
                        </a-col>
                    </a-row> -->

                    <div v-userAuth="'F4-2'" class="mt-24">
                        <a-button @click="ddConfigEffect"
                            style="color: #006db8;;margin-right: 1em;border: solid 1px #006db8;" :loading="ddloading">
                            {{ $t('Test-effect') }}
                        </a-button>
                        <!-- <a-button @click="reset" style="color: #666666;border: solid 1px #999999;margin-right: 1em;">
                            {{ $t('Reset') }}
                        </a-button> -->
                        <a-button type="primary" :disabled="saveHook" @click="ddSubmit">{{ $t('Save') }}</a-button>
                    </div>
                </a-form>
            </div>

        </div>

    </div>
</template>

<script>
import request from '@/request/request'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: '',
    props: {
        hook: {
            type: Boolean,
            required: true
        },
        wechat: {
            type: Boolean,
            required: true
        }
    },
    components: { NoAuthPage },
    data() {
        return {
            formWeChat: this.$form.createForm(this),
            formlayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            formlayout1: {
                labelCol: { span: 5 },
                wrapperCol: { span: 17 }
            },
            weChatData: [],
            checkedWechat: false,
            form: this.$form.createForm(this),
            checkedHook: false,
            robotdata: {},
            saveWechat: true,
            saveHook: true,
            wechatloading: false,
            ddloading: false,
        }
    },

    mounted() {
        this.getFrequency()
        this.getWechat()
        this.getrobot()
        this.checkedHook = this.hook
        this.checkedWechat = this.wechat
        console.log('inhook', this.checkedHook)
    },

    methods: {
        // 企业微信
        getWechat() {
            request('get', 'ops/conf/db/wechat').then(res => {
                console.log('获取企业微信', res)
                if (res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                } else {
                    this.weChatData = res.data
                }
            })
        },
        // 删除企业微信
        // delWeChat(item) {
        //     request('DELETE', 'ops/conf/db/wechat', {
        //         // data:{
        //         id: item.id,
        //         url: item.addr
        //         // }
        //     }).then(res => {
        //         this.getWechat()
        //         this.model(res.data.id) //返回模板
        //         this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        //         // this.gettask()  //任务栏信息
        //     })
        // },
        //测试企业微信配置有效性
        wechatConfigEffect(e) {
            e.preventDefault();
            this.formWeChat.validateFields((err, values) => {
                console.log("value", values.url)
                if (!err) {
                    this.wechatloading = true
                    request('post', 'Alert/check/wechat', {
                        addr: values.url
                    }).then(res => {
                        console.log('微信配置', res)
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        if (res.data.flag == 0) {
                            this.saveWechat = false
                        }
                        this.wechatloading = false
                    }).catch(err => {
                        console.log(err);
                    })
                }
            });

        },

        addWeChat(e) {
            e.preventDefault();
            this.formWeChat.validateFields((err, values) => {
                if (!err) {
                    request('post', 'ops/conf/db/wechat', values).then(res => {
                        // this.getWechat()
                        // if (res.data.flag == 1) {
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        // } else {
                        this.formWeChat.resetFields();
                        this.getWechat()
                        this.saveWechat = true
                        // }

                    })
                }
            })
        },



        //测试钉钉配置有效性
        ddConfigEffect(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.ddloading = true
                    request('post', 'Alert/check/hook', {
                        topic: values.topic,
                        url: values.url
                    }).then(res => {
                        console.log('邮箱钉钉配置', res)
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        if (res.data.flag == 0) {
                            this.saveHook = false
                        }
                        this.ddloading = false
                    }).catch(err => {
                        console.log(err);
                    })
                }
            })
        },




        //hook
        getrobot() {
            request('get', 'ops/conf/db/hook').then(res => {
                if (res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                } else {
                    this.robotdata = res.data
                    console.log("hookdata", this.robotdata)
                }
            })
        },
        ddSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    request('put', 'ops/conf/db/hook', {
                        topic: values.topic,
                        url: values.url
                    }).then(res => {
                        this.getrobot()
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        this.saveHook = true
                        // this.gettask()  //任务栏信息
                    })
                }
            });
        },
        reset() {
            this.form.resetFields();
        },








        // async getSnmp() {
        //     const { data } = await this.$api.alarm.getSnmp();
        //     if (data.flag == 1) {
        //         this.model(data.id) //返回模板
        //         this.notice(data.id, data.params, data.flag) //通知列表显示
        //     } else {
        //         this.snmpData.ip = data.mes.ip
        //         this.snmpData.community = data.mes.community ? data.mes.community : 'public'
        //     }
        // },
        async getFrequency() {
            // await this.getSnmp()

            // const { data: { mes } } = await this.$api.alarm.getAlarmSwitch();

            // this.checkedEmail = !!mes.smtp

            // this.checkedHook = !!mes.hook
            // this.checkedWechat = !!mes.wechat

            // this.checkedSNMP = !!mes.snmp
            // const { data } = await this.$api.alarm.getAlarmRate();
            // // this.$refs.dialogRef.formData = data.mes
            // this.formData = data.mes
        },
        async onChange(name, checked) {
            // console.log("now", name, checked)
            this.$emit('change-list', name, checked)
            // let flag = checked === true ? 1 : 0
            // const params = {
            //     [name]: flag
            // }
            // const item = {
            //     'hook': Number(this.checkedHook),
            //     'wechat': Number(this.checkedWechat),
            //     'snmp': Number(this.checkedSNMP),
            //     'smtp': Number(this.checkedEmail)
            // }
            // const { data } = await this.$api.alarm.modifyAlarmSwitch({ ...item, ...params });
            // if (data.flag == 1) {
            //     this.model(data.id) //返回模板
            //     this.notice(data.id, data.params, data.flag) //通知列表显示
            // } else {
            //     this.getFrequency()
            //     this.$message.success('修改成功！')
            // }
        },


        cancel(e) {
        },
        // handleSave() {
        //     this.$refs.ruleForm.validate(async valid => {
        //         if (valid) {
        //             console.log("formdata", this.form)
        //             // this.loading = true
        //             // const { data } = await this.$api.data.appendGatewayOptionApi(this.form)
        //             // this.model(data.id) //返回模板
        //             // this.notice(data.id, data.params, data.flag) //通知列表显示
        //             // if (data.flag == '0') {
        //             //     this.$emit('get-list')
        //             //     this.handleClose()
        //             // }
        //             // this.loading = false
        //         } else {
        //             return false;
        //         }
        //     });
        // },
        // handleCancel() {
        //     this.$refs['ruleForm'].resetFields();
        // },
        // handleTest(){

        // },
        // handleEmailSave(){

        // },
        // handleAdd(){

        // }
    }
}
</script>

<style scoped>
.title {
    border-left: 3px solid #3590eb;
    padding-left: 8px;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
}

.label {
    border: 0.5px solid #e4e3e3;
    /* background-color: #f2f2f2;
    width: 100%;
    border-radius: 14px; */
}
</style>